<!--外观布局-->
<template>

  <div class="flex flex-row h-screen">
    <!-- 左侧菜单栏（全局） -->
    <div class="flex flex-col w-16 bg-base-300 items-center">
      <!--头像-->
      <div class="avatar my-2">
        <div v-if="userStore.userInfo.avatarUrl" class="rounded-full w-14">
          <img :src="userStore.userInfo.avatarUrl" alt="Avatar" oncontextmenu="return false"/>
        </div>
      </div>

      <ul class="menu mt-0 p-0 w-full">
        <li v-for="item in icons">
          <a class="flex h-16 justify-center" :class="activeMenu=== item.path ?'focus':''" @click="toRoute(item.path) ">
            <component :is="item.component"></component>
          </a>
        </li>
      </ul>

      <div class="h-auto grow "></div>

      <ul class="menu m-0 p-0 w-full">
        <li>
          <a class="flex h-16 justify-center">
            <IconHelp/>
          </a>
        </li>


        <li>
          <a class="flex h-16 justify-center">
            <div class="dropdown dropdown-right dropdown-end">
              <IconSetting tabindex="0" role="button"/>
              <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                <li><a>设置</a></li>
                <li><a @click="clickLogout">退出登录</a></li>
              </ul>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <!-- 主视窗区域 -->
    <div class="flex-auto h-screen overflow-auto" >
       <router-view></router-view>
    </div>
  </div>
</template>


<script setup lang="ts">
import {ref, shallowRef, provide} from "vue";
import {useRoute, useRouter} from 'vue-router';
import {useUserStore} from '../stores/user.ts'

import IconChat from "../components/icons/IconChat.vue";
import IconContact from "../components/icons/IconContact.vue";
import IconGroup from "../components/icons/IconGroup.vue";
import IconMessage from "../components/icons/IconMessage.vue";
import IconSetting from "../components/icons/IconSetting.vue";
import IconHelp from "../components/icons/IconHelp.vue";
import IconVideo from "../components/icons/IconVideo.vue";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

//激活的menu
const activeMenu = ref(route.path)

const icons = ref([
  {
    path: '/chats',
    component: shallowRef(IconChat)
  },
  {
    path: '/contacts',
    component: shallowRef(IconContact)
  },
  {
    path: '/groups',
    component: shallowRef(IconGroup)
  }
  ,
  {
    path: '/notice',
    component: shallowRef(IconMessage)
  }
  ,
  {
    path: '/video',
    component: shallowRef(IconVideo)
  }
])


const clickLogout = async () => {
  try {
    await userStore.logOut()
    window.user.logoutCallback()
    toLogin()
  } catch (e) {
    console.error(e)
  }
}

const toLogin = () => {
  router?.replace({path: '/login'})
}

/**
 * 路由
 * @param path
 */
const toRoute = (path: string) => {
  activeMenu.value = path;
  router?.replace({path: path})
}

/* 注入名, 注入值 */
provide('toRoute', toRoute)

</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
